<template>
  <div style="width: 33.333%">
    <div class="container">数据分析</div>
    <div>
      <div id="charts_3" style="height: 400px; width: 100%"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, nextTick, onMounted } from 'vue'
let myChart = ref(<any>{})
onMounted(() => {
  const chartDom = document.getElementById('charts_3')
  myChart = echarts.init(chartDom)
})
const option = {
  legend: {
    top: 'bottom',
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 150],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8,
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' },
      ],
    },
  ],
}
nextTick(() => {
  option && myChart.setOption(option)
})
</script>

<style lang="scss" scoped></style>
